import React from 'react'
import {TwsReactMarkdownPreview} from 'tws-antd'
import { FormattedMessage } from 'react-intl'

const OnlineLanguageQuiz = ({formItemLayout, FormItem, quiz}) => {
  return (
    <div>
      <FormItem {...formItemLayout} label={<FormattedMessage id='标题' />}>
        <TwsReactMarkdownPreview source={quiz.onlineLanguageName} />
      </FormItem>
      <FormItem {...formItemLayout} label={<FormattedMessage id='描述' />}>
        <TwsReactMarkdownPreview source={quiz.description} />
      </FormItem>
      <FormItem {...formItemLayout} label={<FormattedMessage id='语言' />}>
        <span>{quiz.language}</span>
      </FormItem>
      <FormItem {...formItemLayout} label={<FormattedMessage id='启动代码' />}>
        <TwsReactMarkdownPreview source={`
\`\`\`
${quiz.initCode}
\`\`\`
`} />
      </FormItem>
      <FormItem {...formItemLayout} label={<FormattedMessage id='测试数据' />}>
        <TwsReactMarkdownPreview source={`
\`\`\`
${quiz.testData}
\`\`\`
`} />
      </FormItem>
      <FormItem {...formItemLayout} label={<FormattedMessage id='参考答案' />}>
        <TwsReactMarkdownPreview source={`
\`\`\`
${quiz.answer}
\`\`\`
`} />
      </FormItem>
    </div>)
}

export default OnlineLanguageQuiz
